<template>
	<view class="page-content position-relative" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		
		<view class="conter" v-if="type == 1"> 
			<u-alert :title="$t('workorder_add.appeal-title')" type="error" :description="$t('workorder_add.appeal-tips')"></u-alert>
		</view>
		<view class="m-md section-bg radius-5 position-relative" v-if="type == 2">
			<view class="title-part flex-between flex-align-items p-md p-t-sm p-b-sm">
				<m-icon name="file-list-2-line" :text="taskItem['type_text']+'信息'"></m-icon>
			</view>
			
			<view class="text-info">
				<u-cell-group :border="false">
					<u-cell :isLink="false" :border="false">
						<text slot="title" class="cell-title">{{ taskItem['type_text'] }}ID</text>
						<view slot="value" class="cell-value">
							<view class="flex-start">
								{{taskItem.id}}
							</view>
						</view>
					</u-cell>
				</u-cell-group>
				<u-cell-group :border="false">
					<u-cell :isLink="false" :border="false">
						<text slot="title" class="cell-title">{{ taskItem['type_text'] }}标题</text>
						<view slot="value" class="cell-value">
							<view class="flex-start">
								{{taskItem.title}}
							</view>
						</view>
					</u-cell>
				</u-cell-group>
			</view>
		</view>
		<!-- <view class="conter">
			<view class="option-list" v-if="taskItem">
				<u-radio-group>
					<u-radio activeColor="#36b368" shape="circle" :label="taskItem.title" :checked="true"></u-radio>
				</u-radio-group>
			</view>
		</view> -->
		<view class="m-from section-bg m-md radius-5">
			<view class="title-part flex-between flex-align-items p-md p-t-sm p-b-sm">
				<m-icon name="text" :text="$util.handleStr($t('workorder.add-content-title'),typeText[type - 1])"></m-icon>
			</view>
			<textarea
				v-model="submitText" 
				:placeholder="$t('workorder_add.submit-centent-textarea')" 
				class="text-sm"
			></textarea>
			<view class="p-md">
				<m-uploads
					:uploadNum="3"
					@confirm="uploadConfirm($event)"
					@delete="deleteConfirm($event)"
				>
				</m-uploads>
			</view>
		</view>
		<view class="m-md" v-if="userInfo">
			<m-button shape="circle" :text="typeText[type - 1]"  :loading="actionLoading" @submit="submit"></m-button>
		</view>
		<m-nologin-section></m-nologin-section>
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				type:'',
				actionLoading:false,
				typeText:[
					this.$t('workorder.type-1'),
					this.$t('workorder.type-2'),
					this.$t('workorder.type-3'),
				],
				relationId:'',
				taskId:'',
				taskItem:'',
				taskOrderId:'',
				submitText:'',
				fileImg:[],
				subData:[],
				scrollTop: 0,
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
		}),

		async onLoad(option) {
			let {
				type,
				task_id,
				order_id
			} = option
			if(!type){
				this.$util.showToast(this.$t('app.error-1'))
			}
			uni.setNavigationBarTitle({
				title: this.typeText[type - 1]
			});
			if(type == 1){
				this.taskOrderId = order_id
			}
			if(type == 2){
				this.taskId = task_id
				let key = 'task_detail_' + task_id
				this.taskItem = this.$util.getCache(key, true)
			}
			this.type = type
			// this.type = option.type;
			// if(option.task_id > 0){
			// 	this.taskId = option.task_id
			// 	let key = 'task_detail_'+this.taskId
			// 	this.taskItem = this.$util.getCache(key,{'is_user':true})
			// }
			// if(option.task_orderid>0){
			// 	this.taskOrderId = option.task_orderid;
			// }
			// // 设置标题
			// if(this.type == 1){
			// 	// 申诉
				
			// }
			// if(this.type == 2){
			// 	// 反馈
				
			// }
		},
		onReady(){
			if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			
			// 新增图片
			uploadConfirm(e){
				const urls = e.urls;
				if(urls.length > 0){
					this.fileImg = urls;
					// for (const key in urls) {
					// 	this.fileImg.push(urls[key]);
					// }
				}
				console.log(this.fileImg)
			},
			
			// 删除图片
			deleteConfirm(e){
				const urls = e.urls;
				let chaceImgs = [];
				if(urls.length > 0){
					for (const key in urls) {
						chaceImgs.push(urls[key]);
					}
				}
				this.fileImg = chaceImgs;
			},
			
			// 提交反馈
			async submit(){
				this.actionLoading = true
				// this.$util.showLoading(this.$t('app.submiting'))
				let {
					type,
					taskId,
					taskOrderId,
					submitText,
					fileImg,
				} = this
				let data = {
					'type':type,
					'task_id':taskId,
					'order_id':taskOrderId,
					'text':submitText,
					'imgs':fileImg,
				}
				let res = await this.$api.user.submitWorkOrder(data)
				if(res.code == 200){
					this.$util.showToast(res.msg,function(){
						uni.navigateBack();
					})
				}
				this.actionLoading = false
			},
			// async submitFeed(){
			// 	uni.showLoading({title:this.$t('app.submiting')});
			// 	var res = await User.submitFeed();
			// 	if(res.code == 200){
			// 		this.Common.lightTextToast(res.msg,function(){
			// 			uni.navigateBack();
			// 		});
			// 	}
			// 	// this.getTaskInfo();
			// },
			
			// 进入我的反馈列表
			onNavigationBarButtonTap:function(e){
				uni.navigateTo({
					url: '/pages/workorder/workorder'
				});
			 }
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $bgcolor-2;
	}
	.page-content{
		height: 100%;
		position:relative;
	}
	.option-list{
		border-radius: 10px;
		padding: 10px;
		box-shadow: 0px 0px 10px #eee;
	}

	.top-tips{
		margin: 10px 30rpx;
	}
	

	.m-from{
		.uploads{
			margin: 10px 0;
		}
	}
	uni-textarea{
		// width: 100%;
		width: auto;
		height: 100px;
		padding: 15px;
		border-radius: 10px;
		border:none;
		// box-shadow: 0px 0px 10px #eee;
	}

	.btns .x-btn{
		width: 100%;
		display: block;
		font-size: 32rpx;
		background-color: var(--main-color-1);
	}
</style>
